import { Component, Fragment } from 'react';
import { connect } from 'dva';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import StandartTable from '../../components/StandardTable';

import {Select,Radio, Divider, Button, Card, Dropdown, Menu, Icon, Form, Input,InputNumber, Modal, Popconfirm } from 'antd';

import styles from './productList';
const {TextArea} = Input
@connect(
    ({ productionlist: { productionlists }, class:{classes},loading }) => ({
        productionlists,
        classes,
        loading: loading.effects['productionlist/query'],
        adding: loading.effects['productionlist/add'],
        removing:loading.effects['productionlist/remove']
      }),
     dispatch => ({
      getProduction() {
        console.log('23232')
        return dispatch({ type: 'productionlist/query' })
      },
        remove(pro_obj) {
          console.log('pro_obj')
            console.log(pro_obj)
            return dispatch({ type: 'productionlist/remove', payload: pro_obj });
          },
        add(params) {
          console.log('params')
      // params =  JSON.stringify(params) 
          return dispatch({ type: 'productionlist/add', payload: params });
        },
       })
)
@Form.create()
class ProductList extends Component {
  state = {
    selectedRows: [],
    modalNewVisible: false,
  };

  handleSelectRow = rows => {
    this.setState({ selectedRows: rows });
  };

  handleDeleteOne = obj => {
    const { remove ,getProduction,loading} = this.props;
    console.log(obj)

    remove(obj);

   
    getProduction();
  };
  

  handleDeleteList = () => {
    const { selectedRows } = this.state;
    const { remove } = this.props;
    remove(selectedRows);
  };
  handleStatusOne(obj){
    const { remove } = this.props;
    remove([obj]);
  }

  handleNewModelVisible(){
      const {modalNewVisible}=this.state
      const {loading,getProduction}=this.props
      console.log(loading)
      getProduction();
      this.setState({
          modalNewVisible:!modalNewVisible
      })
  }

  handleNewPD_OK(){
      const {add,form}=this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        console.log(fieldsValue)
        add(fieldsValue).then((res) => {
            console.log(res)
          this.handleNewModelVisible();
        
          form.resetFields();
        });
      });
  }

  render() {
    const { selectedRows } = this.state;

    const columns = [
      {
        title: '编号',
        dataIndex: '_id',
      },
      {
        title: '名称',
        dataIndex: 'name',
      },
      {
          title:'价格',
          dataIndex:'price',
          render:(dataIndex)=>(
              <div>
                  {dataIndex} <span>元</span>
              </div>
          )
      },
      {
        title: '内容',
        dataIndex: 'Attribute',
      },{
          title:'状态',
          dataIndex:'status',
          render:(dataIndex)=>(
              <div>
                  {dataIndex!=true?<p style={{color:'green'}}>在售</p>:<p style={{color:'red'}}>停售</p>}
                  </div>
          )
      },
      {
        title: '操作',
        render: (txt, row, idx) => (
          <Fragment>
            <Divider type="vertical" />
            <Popconfirm
              title="将删除所有记录"
              okText="删除"
              cancelText="取消"
              onConfirm={() => this.handleDeleteOne(row)}
            >
              <Button type="primary" size="small">
                删除
              </Button>
             
            </Popconfirm>
            <Divider type="vertical" />
            <Popconfirm
              title="将删除所有记录"
              okText="删除"
              cancelText="取消"
              onConfirm={() => this.handleStatusOne(row)}
            >
              
              <Button type="danger" size="small" style={{backgroundColor:'red',color:'#fff'}}>
                下架
              </Button>
            </Popconfirm>
          </Fragment>
        ),
      },
    ];
    const menu = (
      <Menu onClick={this.handleMenuClick} selectedKeys={[]}>
        <Menu.Item key="remove">删除</Menu.Item>
      </Menu>
    );

    const { loading, form, removing, productionlists ,adding,classes} = this.props;
    console.log('classes')
   console.log(classes)
   const tableData=productionlists.data?productionlists.data:null;
   console.log(tableData)
    const { modalNewVisible } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <PageHeaderLayout title="订单浏览">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListOperator}>
            <Button icon="plus" type="primary" onClick={() => this.handleNewModelVisible()}>
                添加商品
              </Button>
              {/* {selectedRows.length > 0 && (
                <span>
                  <Popconfirm
                    title="将删除所选记录"
                    okText="删除"
                    cancelText="取消"
                    onConfirm={this.handleDeleteList}
                  >
                    <Button loading={removing}>批量删除</Button>
                  </Popconfirm>
                </span>
              )} */}
            </div>
            <StandartTable
              rowKey="id"
              selectedRows={{}}
            //   onSelectRow={this.handleSelectRow}
            // rowSelection={null}
              data={{ list:tableData }}
              columns={columns}
              onChange={e => console.log(e)}
            />
          
          </div>
          <Modal
            visible={modalNewVisible}
            title="添加职位"
            onOk={() => this.handleNewPD_OK()}
            onCancel={() => this.handleNewModelVisible()}
            confirmLoading={adding}
          >
            <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="分类">
              {form.getFieldDecorator('_classId', {
                rules: [{ required: false, message: '请选择商品分类' }]
              })(<Select
                  style={{ width: 120 }}
                  placeholder="分类"
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                {classes.map(cls => <Select.Option key={cls._id} value={cls._classId}>{cls.name}</Select.Option>)}
              </Select>)}
            </Form.Item>
            <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="名称">
              {form.getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入商品名称' }],
              })(<Input placeholder="请输入商品名称" />)}
            </Form.Item>
            <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="价格">
              {form.getFieldDecorator('price', {
                rules: [{ required: true, message: '价格' }],
              })(<InputNumber placeholder="请输入商品价格" />)}
            </Form.Item>
            <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
              {form.getFieldDecorator('Attribute', {
                rules: [{ required: true, message: '描述' }],
              })(<TextArea placeholder="请输入商品描述" rows={6} />)}
            </Form.Item>
            <Form.Item
              {...formItemLayout}
              label="是否上架"
            >
              {form.getFieldDecorator('status', {
                rules: [{ required: true, message: '请选择商品状态'}],
              })(
                <Radio.Group>
                  <Radio value={true}>否</Radio>
                  <Radio value={false}>是</Radio>
                </Radio.Group>
              )}
            </Form.Item>
          </Modal>
        </Card>
      </PageHeaderLayout>
    );
  }
}

export default ProductList;
